<template>
  <div class="pc_banner">
    <div class="warn-box">
      <svg-icon
        style="margin-right:17px"
        icon-class="warn"
        :size="20"
      />
      <p>店铺轮播图要求尺寸：宽度750像素，高度340像素。图片格式JPG、PNG等格式，图片大小不可超过1M。</p>
    </div>
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        v-if="$hasMethod('#add')"
        size="small"
        class="add-btn"
        @click="openAdd()"
        icon="el-icon-plus"
      >添加轮播图</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column
        align="center"
        label="排序"
        width="80"
      >
        <template slot-scope="scope">
          <!-- onkeyup="value=value.replace(/[^\d]/g,'')" -->
          <span v-if="!$hasMethod('#sort')">{{scope.row.banner_sort}}</span>
          <el-input
            v-else
            oninput="value=value.replace(/[^\d]/g,'')"
            maxLength='9'
            v-model="scope.row.banner_sort"
            @change="changeSort(scope.row.id, scope.row.banner_sort)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="id"
        label="轮播图ID"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="图片"
        width="200"
      >
        <template slot-scope="scope">
          <el-image
            fit="fill"
            class="banner_img"
            :src="$globalObj.imgBaseUrl+scope.row.banner_img"
          >
            <div
              slot="error"
              class="image-slot"
            >
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="create_time"
        width="100"
        label="添加时间"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="链接类型"
      >
        <template slot-scope="scope">
          <span>{{scope.row.jump_type == 1 ? "商品" : scope.row.jump_type == 2 ? "http链接" : "小程序"}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="banner_url"
        label="关联链接"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="状态"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status==1?'success':'danger'">{{scope.row.status==1?'已上架':'已下架'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="280"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-if="$hasMethod('#edit')"
            size="mini"
            type="primary"
            @click="openAdd(scope.row.id)"
          >编辑</el-button>
          <el-button
            v-if="$hasMethod('#enable')"
            size="mini"
            type="warning"
            @click="changeStatus(scope.row.id, scope.row.status)"
          >{{scope.row.status==1?'下架':'上架'}}</el-button>
          <el-button
            v-if="$hasMethod('#delete')"
            size="mini"
            type="danger"
            @click="removeItem(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    ></custom-page>
    <add-dialog
      ref="addDialog"
      :edit-id="editId"
      @getList="getList"
    ></add-dialog>
  </div>
</template>

<script>
import { h5BannerSetList, addOrEditH5BannerSet, delH5BannerSet } from "@/api/recommend";
import addDialog from "./add";
import customPage from "@/components/customPage";
export default {
  components: { addDialog, customPage },
  data() {
    return {
      tableData: [],
      total: 0,
      editId: null
    }
  },
  methods: {
    // 弹出添加弹窗
    openAdd(id) {
      this.editId = id ? id : null;
      this.$refs.addDialog.dialogVisible = true;
    },
    // 更改状态
    changeStatus(id, status) {
      addOrEditH5BannerSet({
        id,
        status: status == 1 ? 0 : 1
      }).then(res => {
        this.getList();
      })
    },
    // 更改顺序
    changeSort(id, val) {
      addOrEditH5BannerSet({
        id,
        banner_sort: val
      }).then(res => {
        this.getList();
      })
    },
    // 删除
    removeItem(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        delH5BannerSet(id).then(res => {
          this.getList();
        });
      }).catch(() => { });
    },
    getList() {
      const { page, pageSize } = this.$refs.customPage;
      h5BannerSetList({ page, pageSize }).then(res => {
        this.tableData = res.data;
        this.total = res.total;
      })
    }
  },
  mounted() {
    this.getList();
  }
}
</script>

<style lang="scss" scoped>
.banner_img {
  width: 195px;
  height: 45px;
  line-height: 45px;
}
</style>
